<template>
  <div style="background-color: #f4f4f4; height: 100%; position: relative">
    <van-sticky>
      <van-nav-bar
        title="不凡"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>

    <!-- title -->

    <div class="title">我的收藏</div>

    <!-- 收藏展品 -->
    <div class="sublist">
       <router-link :to="`/home/${item.id}`" tag="div" class="demo" v-for="item in logo" :key="item.id">
        <img :src="item.list_pic_url" alt="" />
        <p class="p1">{{ item.name }}</p>
        <p class="p2">￥{{ item.retail_price }}</p>
       </router-link>
    </div>
  </div>
</template>

    <script>
import { keep } from "@/api/my/keep.js";

export default {
  data() {
    return {
      logo: [],
    };
  },
  computed: {},
  async created() {
    var res = await keep({
      openId: localStorage.getItem("openId"),
    });
    console.log(res);
    this.logo = res.collectGoodsList;
  },
  mounted() {},
  methods: {
    onClickLeft() {
      this.$router.push({
        name: "my",
      });
    },
  },
};
</script>

    <style scoped lang="scss">
.title {
  padding: 0.26667rem 0;
  text-align: center;
  background: #fff;
  margin-bottom: 0.06667rem;
  font-size: 0.48rem;
  font-weight: 700;
}

.sublist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 9.73333rem;
  margin: 0 auto;
  .demo {
    width: 4.8rem;
    background: #fff;
    margin-bottom: 0.13333rem;
    padding-bottom: 0.13333rem;
    img {
      display: block;
      width: 4.02667rem;
      height: 4.02667rem;
      margin: 0 auto;
    }
    .p1 {
      color: #000;
      font-size: 12px;
      text-align: left;
      margin: 12px 0 2.5px 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .p2 {
      color: #9c3232;
      font-size: 12px;
      text-align: left;
      margin: 12px 0 2.5px 12px;
    }
  }
}
</style>
